<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" th:href="@{~/layui/css/layui.css}">
		<script th:src="@{~/layui/layui.js}"></script>
		<title>Admin</title>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">云社区</div>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item" sec:authentication="name">
						清风随我意
					</li>
					<li class="layui-nav-item"><a th:href="@{~/logout}">退出</a></li>
				</ul>
			</div>
			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all">
						<li class="layui-nav-item"><a href="index">首页</a></li>
						<li class="layui-nav-item"><a href="user">用户管理</a></li>
						<li class="layui-nav-item">
							<a href="javascript:;">资源管理</a>
							<dl class="layui-nav-child">
								<dd><a href="wapTj">审核资源</a></dd>
								<dd><a href="wapList">资源列表</a></dd>
							</dl>
						</li>
						<li class="layui-nav-item"><a href="">设置</a></li>
					</ul>
				</div>
			</div>
			<div class="layui-body" style="background-color: #F2F2F2;">
				<div class="layui-fluid">
					<div class="layui-row layui-col-space15" style="padding-top: 20px;">
						<div class="layui-col-md9">
							<div class="layui-card">
								<div class="layui-card-header">
									<span class="layui-breadcrumb">
										<a href="">用户管理</a>
										<a><cite>主界面</cite></a>
									</span>
								</div>
								<div class="layui-card-body">
									<table id="user-data" lay-filter="test"></table>
								</div>
							</div>
						</div>
						<div class="layui-col-md3">
							<div class="layui-card layui-hide" id="userInfo">
								<div class="layui-card-header">用户信息</div>
								<div class="layui-card-body">
									<div class="layui-row layui-col-space15">
										<div class="layui-col-lg12">
											<li style="background-color: #F8F8F8;">
												<a href="#">
													<h3 style="padding-bottom: 5px;padding-left: 5px;padding-right: 5px;color: #999999;">已购资源</h3>
													<p>
														<cite style="font-size: 30px;color: #009688;padding: 0 10px;" id="userHave">0</cite>
													</p>
												</a>
											</li>
										</div>
										<div class="layui-col-lg12">
											<li style="background-color: #F8F8F8;">
												<a href="#">
													<h3 style="padding-bottom: 5px;padding-left: 5px;padding-right: 5px;color: #999999;">提交资源</h3>
													<p>
														<cite style="font-size: 30px;color: indianred;padding: 0 10px;" id="userSub">999</cite>
													</p>
												</a>
											</li>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-footer">
				<div class="layui-main">
					<p align="center">@2019 <a th:href="@{http://www.yqfeng.xyz}">www.yqfeng.com</a> ---云社区</p>
				</div>
			</div>
		</div>
		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
			layui.use(['table','jquery'], function() {
				var table = layui.table,
					$=layui.jquery;

				//第一个实例
				table.render({
					elem: '#user-data',
					url: '/admin/userData', //数据接口,
					page: true ,//开启分页,
					cellMinWidth: 80,
					limit:15,
					limits:[15,30,45,60],
					cols: [
						[ //表头
							{
								field: 'id',
								title: 'ID',
								fixed: 'left',
								width: 100
							}, {
								field: 'name',
								title: '用户名',
								width:200

							}, {
								field: 'password',
								title: '密码',

							}, {
								field: 'email',
								title: '邮箱',
								width:250
							}, {
								field: 'money',
								title: '金币',
								sort: true,
								width:100,
								edit:'text'
							}
						]
					]
				});
				table.on('row(test)', function(obj){
					var data = obj.data;

					$.ajax({
						url:'userInfo?id='+data.id+'&name='+data.name,
						success:function (data) {
							$("#userInfo").removeClass("layui-hide").addClass("layui-show");
							$("#userHave").text(data['userHave']);
							$("#userSub").text(data['userSub']);
						}
					})

					//标注选中样式
					obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
				});
				table.on('edit(test)', function(obj){
					var  data = obj.data;
					$.ajax({
						url:"updateUser",
						type:"post",
						data:{"id":data.id,"money":data.money},
						success:function () {
							layer.msg("修改成功");
						}
					})
				});

			});
		</script>
	</body>
</html>
